<template>
  <div>
    <el-form :model="formItem" label-width="120px" size="mini" class="form-view">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="周次：" prop="year">
            {{ formatYearWeek(formItem.weekDate) }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位：" prop="companyName">
            {{ formItem.companyName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="报告人" prop="userName">
            {{ formItem.userName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务项目">
            {{ formItem.serviceItem }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实际到场人数">
            {{ formItem.actualAttendanceNumber }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="本周工作完成情况">
            <div class="height-div">
              {{ formItem.weekWorkInfo }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="总结描述">
            <div class="height-div">
              {{ formItem.summaryDesc }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="下周工作计划" prop="nextWeekWorkPlan">
            <div class="height-div">
              {{ formItem.nextWeekWorkPlan }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="问题记录及解决方案" prop="problemOrSolution">
            <div class="height-div">
              {{ formItem.problemOrSolution }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <div class="height-div">
              {{ formItem.remark }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="附件">
            <div v-for="fileObj in formItem.attachment" :key="fileObj.fsId">
              <el-link type="primary" :href="downloadFileUrl(fileObj.fsId)" :download="downloadFileUrl(fileObj.fsId)" target="_blank">{{ fileObj.name }}</el-link>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { detail } from '@neu/dcom-ui/api/operationSupportWeekly'
import { downloadFileUrl } from '@neu/dcom-ui/api/workDaily'
import moment from 'moment'
// 定义一个表单原始项
const formItem = {
  /** 单位名称 */
  companyName: '',
  /** 单位编码 */
  companyCode: '',
  /** 创建人员 */
  userName: '',
  /** 创建人员编码 */
  userCode: '',
  /** 服务项目 */
  serviceItem: '',
  /** 实际到场人数 */
  actualAttendanceNumber: 0,
  /** 本周工作情况 */
  weekWorkInfo: '',
  /** 下周工作计划 */
  nextWeekWorkPlan: '',
  /** 总结描述 */
  summaryDesc: '',
  /** 问题记录及解决方案 */
  problemOrSolution: '',
  /** 备注 */
  remark: '',
  weekDate: '',
  /** 附件 */
  attachment: []
}

export default {
  name: 'OperationSupportWeeklyViewForm',
  props: {
    // 根据id可判断是新建还是更新
    id: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      // 查看的表单内容
      formItem: {
        ...formItem
      },
      downloadFileUrl: downloadFileUrl
    }
  },
  watch: {
    // 监控id的变化，初始化表单数据
    id: function() {
      this.fetch()
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    // 初始化表单数据
    fetch() {
      if (this.id !== -1) {
        detail(this.id).then(response => {
          const data = response.data
          if (data.attachment) {
            const fileJoins = data.attachment.split('||')
            data.attachment = fileJoins.map(it => {
              const fsInfo = it.split('@@')
              return {
                fsId: fsInfo[0],
                name: fsInfo[1]
              }
            })
          } else {
            data.attachment = []
          }
          this.formItem = {
            ...data
          }
        })
      } else {
        this.formItem = {
          ...formItem
        }
      }
    },
    formatYearWeek(weekDate) {
      return moment(weekDate).year() + ' 年 ' + moment(weekDate).week() + ' 周'
    }
  }
}
</script>

<style lang="scss" scoped>
.height-div {
    min-height: 80px;
    max-height: 100px;
}
</style>
